<script setup>
import MessageItem from '../message-item/MessageItem.vue';
import { useChat } from '../../../store/chat';
import { ref, watch, nextTick } from 'vue';

const chat = useChat()
const scrollbarRef = ref()

watch(
    () => chat.messages.length,
    async (newLen, oldLen) => {
        await nextTick()
        const wrapper = scrollbarRef.value?.$el?.querySelector('.el-scrollbar__wrap')
        if (wrapper) {
            scrollbarRef.value.setScrollTop(wrapper.scrollHeight)
        }
    },
    { flush: 'post' }
);
</script>

<template>
    <el-scrollbar ref="scrollbarRef" height="100%">
        <MessageItem v-for="msg in chat.messages" :key="msg.id" :msg="msg"></MessageItem>
    </el-scrollbar>
</template>

<style scoped>
</style>